import { use, useState } from 'react';

const Test = () => {
	const [text, setText] = useState('');
	const handlerInputValue = e => {
		setText(e.target.value);
	};

	const [rowText, setRowText] = useState('textArea');
	const handlerRowText = e => {
		setRowText(e.target.value);
	};

	const [radioVal, setRadioVal] = useState('female');
	const handlerRadio = e => {
		setRadioVal(e.target.value);
	};

	const [checkList, setCheckList] = useState(['bj']);

	const handlerCheckBox = e => {
		const cur = e.target.value;
		if (checkList.includes(cur)) {
			setCheckList(checkList.filter(item => item !== cur));
		} else {
			setCheckList(checkList.concat(cur));
		}
	};

	const [lang, setLang] = useState('js');
	const handlerLangChange = e => {
		setLang(e.target.value);
	};
	return (
		<div>
			{/* input 受控组件 */}
			<input type="text" value={text} onChange={handlerInputValue} />
			<div>{text}</div>
			{/* textArea 受控组件 */}
			<textarea
				type="textArea"
				value={rowText}
				onChange={handlerRowText}
			></textarea>
			<div
				dangerouslySetInnerHTML={{ __html: rowText.replaceAll('\n', '<br>') }}
			></div>

			{/* radio受控组件 */}
			<label htmlFor="radio1">男</label>
			<input
				type="radio"
				id="radio1"
				value="male"
				name="gender"
				onChange={handlerRadio}
				checked={radioVal === 'male'}
			/>
			<label htmlFor="radio2">女</label>
			<input
				type="radio"
				id="radio1"
				value="female"
				name="gender"
				onChange={handlerRadio}
				checked={radioVal === 'female'}
			/>
			<div>{radioVal}</div>
			{/* check 受控组件 */}
			<label htmlFor="check1">北京</label>
			<input
				type="checkbox"
				value="bj"
				id="check1"
				checked={checkList.includes('bj')}
				onChange={handlerCheckBox}
			/>
			<label htmlFor="check1">上海</label>
			<input
				type="checkbox"
				value="sh"
				id="check2"
				checked={checkList.includes('sh')}
				onChange={handlerCheckBox}
			/>
			<label htmlFor="check1">深圳</label>
			<input
				type="checkbox"
				value="sz"
				id="check3"
				checked={checkList.includes('sz')}
				onChange={handlerCheckBox}
			/>
			<div>{JSON.stringify(checkList)}</div>
			<input type="hidden" />
			{/* select 下拉框 */}
			<select name="selectLang" value={lang} onChange={handlerLangChange}>
				<option value="js">JS</option>
				<option value="java">JAVA</option>
				<option value="c#">C#</option>
			</select>
			<div>{lang}</div>
		</div>
	);
};

export default Test;
